<template>
  <div class="box">
    <div class="left">
      <van-sidebar v-model="active" @change="getchange(active)">
        <van-sidebar-item
          v-for="item in fist"
          :title="item.t_text"
          :key="item.t_type"
        />
      </van-sidebar>
    </div>
    <div class="right">
      <van-tabs v-model:active="acound" @change="procun(acound)">
        <van-tab v-for="item in seound" :key="item.s_type" :title="item.s_text">
          dsaf
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { carlist } from "../api/carteg";
import { Carlistclass } from "../interfase/module/carlist";
export default defineComponent({
  setup() {
    const active = ref<number>(0);
    const acound = ref<number>(0);
    const Carlist = carlist();
    const state = {
      fist: ref<Array<Carlistclass.fistlist>>([]),
      seound: ref<Array<Carlistclass.scoundlist>>([]),
      list: ref<Array<Carlistclass.productlist>>([]),
      ca: ref<number>(0),
      pagesize: ref<number>(10),
      pagecount: ref<number>(1),
    };
    //一级分类
    const fistlist = async () => {
      const result = await Carlist.firstCarList();
      // console.log("12", result);
      state.fist.value = result.result;
    };
    //二级分类的事件
    const getchange = async (active: any) => {
      // console.log(active);
      state.ca.value = active;
      console.log(state.ca.value);

      const result = await Carlist.secondList({ t_type: state.ca.value });
      // console.log(result);
      state.seound.value = result.result;
    };
    //三级分类的事件
    const procun = async (acound: any) => {
      // console.log(acound);
      const result = await Carlist.getPrond({
        t_type: state.ca.value,
        s_type: acound,
        pagesize: state.pagesize.value,
        pagecount: state.pagecount.value,
      });
      console.log("2", result);
    };

    onMounted(() => {
      fistlist();
    });
    return {
      active,
      ...state,
      acound,
      procun,
      getchange,
    };
  },
});
</script>

<style lang="less">
.box {
  display: flex;
}
.right {
  width: 80%;
}
</style>
